﻿
@{
    Layout = null; 
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <link href="~/Content/Css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
    <link href="~/Content/Css/font-awesome.css?v=4.4.0" rel="stylesheet">
    <link href="~/Content/Css/plugins/bootstrap-table/bootstrap-table.min.css" rel="stylesheet">
    <link href="~/Content/Css/animate.css" rel="stylesheet">
    <link href="~/Content/Css/style.css?v=4.1.0" rel="stylesheet">

    <link href="~/Content/Css/plugins/ionRangeSlider/ion.rangeSlider.css" rel="stylesheet" />
    <link href="~/Content/Css/plugins/ionRangeSlider/ion.rangeSlider.skinFlat.css" rel="stylesheet" />
    <style>
        /*.control-label {
            text-align: right;
            line-height: 34px;
        }*/

        .help-block {
            margin-top: 0px;
        }

        .paa {
            padding-left: 0px;
            padding-right: 0px;
        }

        .input-group {
            width: 100%;
        }
    </style>
    <title>Insert</title>
</head>
<body>
    <div class="wrapper wrapper-content animated fadeInRight" style="padding-top:5px">
        <div class="row">
            <div class="col-sm-12">
                <form class="form-horizontal m-t" id="mainForm">
                    <input type="hidden" id="StartTime" name="Id" value="" />
                    <input type="hidden" id="EndTime" name="CreatedTime" value="" /> 
                    <div class="form-group">

                        <label class="col-sm-3 control-label">上下班时间：</label>
                        <div class="col-sm-10">
                            <input type="text" id="someID" name="rangeName" value="" />
                        </div>
                    </div>
                     
                    <div class="form-group">
                        <div class="col-sm-12">
                            <button id="submit" class="btn btn-primary pull-right" type="submit">
                                <i class="fa fa-check"></i>&nbsp;提&nbsp;交
                            </button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <!-- 全局js -->
    <script type="text/javascript" src="~/Scripts/jquery.min.js?v=2.1.4"></script>
    <script type="text/javascript" src="~/Scripts/bootstrap.min.js?v=3.3.6"></script>

    <!-- jQuery Validation plugin javascript-->
    <script type="text/javascript" src="~/Scripts/plugins/validate/jquery.validate.min.js"></script>
    <script type="text/javascript" src="~/Scripts/plugins/validate/messages_zh.min.js"></script>
    <script type="text/javascript" src="~/Scripts/Extensions/ExtValidator.js"></script>

    <!-- layer javascript -->
    <script type="text/javascript" src="~/Scripts/plugins/layer/layer.min.js"></script>
    @*拖动时间*@
    <script src="~/Scripts/plugins/ionRangeSlider/ion.rangeSlider.min.js"></script>


    @*<script type="text/javascript" src="js/bootstrap-timepicker.min.js"></script>*@


    <script type="text/javascript">



        //---------------加载时间----------------------
        var data = new Array();
        var index = 0;
        for (var i = 0; i < 24; i++) {
            for (var j = 0; j < 60; j = j + 5) {
                var iVla = i < 10 ? "0" + i : i;
                var jVla = j < 10 ? "0" + j : j;
                data[index] = iVla + ":" + jVla + ":00";
                index++;
            }
        }
        function GetIndex(value, defaultvalues) {
            if (value == "") {
                value = defaultvalues;
            }
            var i = 0;
            $.each(data, function (index, val) {
                if (value == val) {
                    i = index;
                    return false;
                }
            })
            return i;
        }



        $("#someID").ionRangeSlider({
            values: eval(data),
            //min: 0,                        // min value
            //max: 1440,                       // max value
            from: GetIndex("08:30:00"),                       // overwrite default FROM setting
            to: GetIndex("17:30:00"),                         // overwrite default TO setting
            type: "double",                 // slider type
            // step: 10,                       // slider step
            //postfix: "",    // postfix text
            hasGrid: true,                  // enable grid
            //  hideText: true,                 // hide all text data
            prettify: false,
            onChange: function (obj) {        // function-callback, is called on every change
                //console.log(obj);
                $("#StartTime").val(obj.fromValue);
                $("#EndTime").val(obj.toValue);
            },
            onFinish: function (obj) {        // function-callback, is called once, after slider finished it's work
                $("#StartTime").val(obj.fromValue);
                $("#EndTime").val(obj.toValue);

            }
        });
        //---------------end加载时间----------------------


        //------------------保存数据---------------------

        var icon = "<i class='fa fa-times-circle'></i> ";
        var validator = $("#mainForm").validate({
            rules: {
                
            },
            messages: {
                
            },
            submitHandler: function (form) {
                $.ajax({
                    url: "/Organization/Side/InsertAsync",
                    type: "post",
                    dataType: "json",
                    data: GetJsonData(),//$('#mainForm').serialize(),
                    success: function (data) {
                        //Info,Success,Warning,Error
                        var type = data.type;
                        if (type == 1) {
                            layer.msg(data.content, { icon: 6, time: 2000 },
                                function () {
                                    var index = parent.layer.getFrameIndex(window.name);
                                    parent.layer.close(index);
                                });
                        } else {
                            layer.msg(data.content, { icon: 5, time: 2000 });
                        }
                    }
                });
            }
        });
         

        //加载数据
        function GetJsonData() {
            var start = $("#StartTime").val() == "" ? "08:30:00" : $("#StartTime").val();
            var end = $("#EndTime").val() == "" ? "17:30:00" : $("#EndTime").val();  
            var json = { 
                "StartTime": start,
                "EndTime": end, 
            };
            return json;
        }
        //------------------保存数据---------------------

    </script>
</body>
</html>
